<template>
  <div ref="echarts1" style="width:550px;height:280px"></div>
</template>

<script>
import { getWorkOrderECharts } from '@/api/databoard'
const echarts = require('echarts')
export default {
  methods: {
    initCharts () {
      // var lastMonth = []
      // for (var i = 0; i < 30; i++) {
      //   lastMonth.unshift(new Date(new Date()
      //     .setDate(new Date().getDate() - i))
      //     .toLocaleDateString())
      // }
      // let data = lastMonth.map(item => {
      //   return item.replace(/\//g, "-")
      // })
      const myChart = echarts.init(this.$refs.echarts1)
      getWorkOrderECharts().then(res => {
        console.log(res)
        if (res.data.code == '200') {
          let date = res.data.data.xAxis.data
          let data1 = res.data.data.series.filter(item => {
            return item.name == '保养总数'
          })
          let data2 = res.data.data.series.filter(item => {
            return item.name == '逾期未保'
          })
          let data3 = res.data.data.series.filter(item => {
            return item.name == '已保养数'
          })
          myChart.setOption({
            grid: {  // 布满div
              top: "50px",
              left: "30px",
              right: "0px",
              bottom: "20px"
            },
            legend: {},
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: date
            },
            yAxis: {
              type: 'value',
            },
            series: [
              {
                name: '保养总数',
                data: data1[0].data,
                type: 'bar',
                itemStyle: {
                  normal: {
                    color: "#99cccc", //改变颜色
                  },
                },
              },
              {
                name: '逾期未保',
                data: data2[0].data,
                type: 'bar',
                itemStyle: {
                  normal: {
                    color: "#ff6666", //改变颜色
                  },
                },
              },
              {
                name: '已保养数',
                data: data3[0].data,
                type: 'bar',
                itemStyle: {
                  normal: {
                    color: "#ffcc99", //改变颜色
                  },
                },
              }
            ]
          })
        }
      })


      window.addEventListener("resize", () => {
        myChart.resize()
      })
    }
  },
  mounted () {
    this.initCharts()
  }
}

</script>
<style>
</style>